import React, {Component} from 'react';
import PropTypes from 'prop-types';
/**
* LocalStorageComponent is an example component.
* It takes a property, `label`, and
* displays it.
* It renders an input with the property `value`
* which is editable by the user.
*/
export default class LocalStorageComponent extends Component {
constructor(props) {
super(props);
const {setProps, label, value} = this.props;
Eif (value) {
localStorage.setItem(label, value);
} else {
if(!localStorage.getItem(label)) {
localStorage.setItem(label, 0);
}
}
window.addEventListener('storage', function (event) {
if (event.key == label) {
if (setProps && (event.oldValue != event.newValue)) {
setProps({value: event.newValue});
}
}
});
}
render() {
const {id, setProps, label, value} = this.props;
Eif (value) {
localStorage.setItem(label, value);
} else {
let last_value = localStorage.getItem(label);
if (setProps && last_value != value) {
setProps({value: last_value});
}
}
return (
<div id={id}>
{ localStorage.getItem(label)}
</div>
);
}
}
LocalStorageComponent.propTypes = {
/**
* The ID used to identify this compnent in Dash callbacks
*/
id: PropTypes.string,
/**
* The label to store value
*/
label: PropTypes.string,
/**
* The value displayed in the input
*/
value: PropTypes.string,
/**
* Dash-assigned callback that should be called whenever any of the
* properties change
*/
setProps: PropTypes.func
};
|